<template>
	<view class="comment-item" :class="{'boxShadow': !isInDetailPage}">
		<view class="item-padding-fix">
			<view class="comment-item-top">
				<text class="targer-pos">{{commentData.identityDesc}}</text>
				<image @tap.stop="shareCommentItem" class="share-icon" src="../../static/shareIcon.png"></image>
				<view class="share-hot-area" @tap.stop="shareCommentItem"></view>
			</view>

			<view class="target-msg" @tap.stop="toUserDetail(commentData.toUserId,commentData.fromUserId)">
				<view class="target-msg1">
					<text class="target-name">{{commentData.toName}}</text>
					<text class="target-pos">{{commentData.position || '--'}}</text>
				</view>
				<view class="target-msg2">
					<image class="building-icon" src="../../static/buildingIcon.png"></image>
					<text class="target-comp">{{commentData.company || '--'}}</text>
				</view>
				<view class="target-comp-address">
					<image class="address-icon" src="../../static/locationIcon.png"></image>
					<text class="target-city">{{commentData.address || '--'}}</text>
				</view>
			</view>

			<view class="comment-msg">
				<view class="comment-from-msg">
					<text class="fix-text">来自</text>
					<image class="comment-user-avatar" :src="getImgUrl(commentData.fromAvatar)"
						@tap.stop="toUserDetail(commentData.fromUserId)">
					</image>
					<text class="comment-user-name"
						@tap.stop="toUserDetail(commentData.fromUserId)">{{commentData.fromName}}</text>
					<text class="fix-text">的点评</text>
				</view>

				<view class="comment-detail" @tap="commentClk">
					<view class="comment-content">
						<image class="emoji-img" :src="getImgUrl(commentData.evaluateIcon,'emoji')"></image>
						<text class="content-text">{{commentData.evaluateGrade}}</text>
					</view>
					<view class="dot-icon-wrap" @tap.stop="showCommentContentPop">
						<image class="dot-icon" v-show="!isInDetailPage && commentData.evaluateDesc"
							src="../../static/threeDotIcon.png"></image>
					</view>
				</view>

				<view class="comment-detail-text" v-show="isInDetailPage && commentData.evaluateDesc">
					{{commentData.evaluateDesc}}
				</view>

				<view class="comment-interact">
					<text class="comment-time" @tap.stop="commentClk">{{commentData.createdTime || '--'}}</text>
					<view class="interact-msg">
						<view class="like-msg" @tap.stop="togggleLike">
							<image class="like-icon" v-show="!likeFlag" src="../../static/heartShapedIconGrey.png">
							</image>
							<image class="like-icon" v-show="likeFlag" src="../../static/heartShapedIcon.png"></image>
							<text class="like-num">{{commentData.likeTotal}}</text>
						</view>

						<view class="view-msg" @tap.stop="toComment">
							<image class="view-icon" src="../../static/commentIcon.png"></image>
							<text class="view-num">{{commentData.commentTotal}}</text>
							<view class="comment-hot-area"></view>		
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="comment-leave-msg"
			v-if="isInDetailPage && (commentData.likeList.length > 0 || commentData.commentsList.length > 0)">
			<view class="like-users" v-if="commentData.likeList.length > 0"
				:class="{'has-border': commentData.commentsList.length > 0}">
				<image class="lick-icon" src="../../static/heartShapedIcon.png"></image>
				<view class="like-users-name">
					<text v-for="(item,index) in commentData.likeList" :key="item.id"
						@tap.stop="toUserDetail(item.createUserId)">{{index === 0 ? '': ','}}{{item.createUserName}}</text>
				</view>
			</view>
			<view class="leave-msg" v-if="commentData.commentsList.length > 0">
				<view class="leave-msg-item" v-for="(item,index) in commentData.commentsList" :key="item.id"
					v-show="extendAllRemarkMsg || index < 10">
					<text class="leave-msg-user"
						@tap.stop="toUserDetail(item.createUserId)">{{item.createdUserName}}{{item.replyToUserId ? '':'：'}}</text>
					<text class="leave-msg-text1" v-if="item.replyToUserId">回复</text>
					<text class="leave-msg-user" v-if="item.replyToUserId"
						@tap.stop="toUserDetail(item.replyToUserId)">{{item.replyToUserName}}：</text>
					<text class="leave-msg-text2" @tap.stop="toReply(item)">{{item.commentContent}}</text>
				</view>
				<!-- <view class="extend-all-comment"
					v-show="!extendAllRemarkMsg && commentData.commentsList && commentData.commentsList.length >= 10"
					@tap.stop="toggleAllLeaveMsg">展开剩余留言内容</view>
				<view class="extend-all-comment"
					v-show="extendAllRemarkMsg && commentData.commentsList && commentData.commentsList.length >= 10"
					@tap.stop="toggleAllLeaveMsg">收起留言内容</view> -->
			</view>
		</view>

		<alertPop :title="'评语'" :content="commentData.evaluateDesc" :btnText="'确定'" @maskClk="closeCommentContentPop"
			@btnClk="closeCommentContentPop" v-show="commentContentPopShow">
		</alertPop>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		props: {
			commentDataOrigin: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isInDetailPage: {
				type: Boolean,
				default: false
			},
			canJumpToUserDetail: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				commentData: {},
				likeFlag: false,
				commentContentPopShow: false,
				extendAllRemarkMsg: true // 展开所有评论
			}
		},
		created() {
			this.commentData = this.commentDataOrigin
			this.likeFlag = this.commentData.isToLiked
		},
		watch: {
			commentDataOrigin(nVal) {
				this.commentData = this.commentDataOrigin
				this.likeFlag = this.commentData.isToLiked
			}
		},
		methods: {
			commentClk() {
				this.$emit('commentClk', this.commentData)
			},
			// 分享评价
			shareCommentItem() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/myFriends/friendsListForShare?fromName=${this.commentData.fromName}&fromId=${this.commentData.fromUserId}&commentId=${this.commentData.id}`
				})
			},
			// 展示评价详情弹窗
			showCommentContentPop() {
				this.commentContentPopShow = true
			},
			// 关闭评价详情弹窗
			closeCommentContentPop() {
				this.commentContentPopShow = false
			},
			// 喜欢/取消喜欢
			togggleLike() {
				if (this.isInDetailPage) {
					this.giveLike()
				} else {
					this.commentClk()
				}
			},
			giveLike() {
				if (this.isDealLike) return
				this.isDealLike = true
				const data = {
					likeType: this.likeFlag ? 2 : 1,
					evaluateId: this.commentData.id,
					createUserId: this.$store.state.userInfo.id,
					createUserName: this.$store.state.userInfo.nickName
				}
				this.$api.giveLike(data).then((res) => {
					this.refreshCommentData()
					this.likeFlag = !this.likeFlag

				})
			},
			// 展开/收齐剩余留言
			toggleAllLeaveMsg() {
				this.extendAllRemarkMsg = !this.extendAllRemarkMsg
			},
			// 去专家详情
			toExpertDetail() {
				// uni.navigateTo({
				// 	url: '/pages/expertDetail/index?id=1'
				// })
			},
			// 用户详情
			toUserDetail(id, fromId) {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
					return
				}

				if (id == 0) {
					uni.showToast({
						title: '该用户未注册',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/expertDetail/index?id=${id}&linkId=${fromId}&evaId=${this.commentData.id}`
				})
			},
			// 去评论
			toComment() {
				if (this.isInDetailPage) {
					this.$emit('toComment')
				} else {
					this.commentClk()
				}
			},
			// 回复评论
			toReply(data) {
				this.$emit('toReply', data)
			},

			refreshCommentData() {
				this.$api.getEvaluateDetail(this.commentData.id).then((res) => {
					this.isDealLike = false
					this.commentData = res
				}).catch(() => {
					this.isDealLike = false
				})
			},
		}
	}
</script>

<style lang="less">
	.comment-item {
		margin-top: 40rpx;
		width: 690rpx;
		min-height: 360rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 23rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		&.boxShadow {
			box-shadow: 0px 4rpx 8rpx 0px rgba(218, 227, 248, 0.5);
		}

		.comment-item-top {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid rgba(51, 153, 255, 0.3);
			position: relative;

			.targer-pos {
				font-weight: 600;
				color: #333333;
				font-size: 38rpx;
			}

			.share-icon {
				width: 36rpx;
				height: 36rpx;
			}
			.share-hot-area{
				position: absolute;
				top: 20rpx;
				right: -6rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		.target-msg {
			position: relative;
			border-bottom: 1rpx solid rgba(51, 153, 255, 0.3);

			.target-msg1 {
				display: flex;
				align-items: flex-end;
				padding-top: 24rpx;
				padding-bottom: 26rpx;
				height: 50rpx;

				.target-name {
					font-size: 36rpx;
					color: #333;
					margin-right: 17rpx;
				}

				.target-pos {
					font-size: 26rpx;
					color: #666;
					padding-bottom: 4rpx;
				}
			}

			.target-msg2 {
				display: flex;
				align-items: flex-end;
				padding-bottom: 28rpx;

				.building-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 15rpx;
					padding-bottom: 4rpx;
				}

				.target-comp {
					font-size: 26rpx;
					color: #666;
				}
			}

			.target-comp-address {
				position: absolute;
				top: 36rpx;
				right: 0;
				display: flex;
				align-items: center;

				.address-icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				.target-city {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.comment-msg {
			padding-top: 22rpx;

			.comment-from-msg {
				display: flex;
				align-items: center;

				.fix-text {
					font-size: 24rpx;
					color: #999;
				}

				.comment-user-avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin: 0 10rpx;
				}

				.comment-user-name {
					font-size: 24rpx;
					color: #666;
					margin-right: 10rpx;
					font-weight: bold;
				}

			}

			.comment-detail {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 32rpx;
				padding-bottom: 28rpx;

				.comment-content {
					display: flex;
					align-items: center;

					.emoji-img {
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}

					.content-text {
						font-size: 32rpx;
						color: #666;
					}
				}

				.dot-icon-wrap {
					width: 56rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.dot-icon {
						width: 36rpx;
						height: 8rpx;
					}
				}

			}

			.comment-detail-text {
				padding: 16rpx 24rpx;
				background-color: #F8FAFD;
				border-radius: 6rpx;
				color: #323746;
				line-height: 44rpx;
				font-size: 26rpx;
			}

			.comment-interact {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 28rpx;
				padding-bottom: 22rpx;

				.comment-time {
					font-size: 30rpx;
					color: #999;
				}

				.interact-msg {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 250rpx;

					.like-msg {
						display: flex;
						align-items: center;
						margin-right: 24rpx;

						.like-icon {
							width: 34rpx;
							height: 30rpx;
							margin-right: 18rpx;
						}

						.like-num {
							font-size: 26rpx;
							color: #666;
						}
					}

					.view-msg {
						display: flex;
						align-items: center;
						margin-right: 16rpx;
                        position: relative;
						.view-icon {
							width: 34rpx;
							height: 34rpx;
							margin-right: 18rpx;
						}

						.view-num {
							font-size: 26rpx;
							color: #666;
						}
						.comment-hot-area{
                           position: absolute;
						   width: 100%;
						   height: 70rpx;
						   left: 0;
						   top: -18rpx;
						}
					}
				}
			}
		}

		.item-padding-fix {
			padding: 0 17rpx;
		}

		.comment-leave-msg {
			box-sizing: border-box;
			width: 644rpx;
			margin: 0 auto;
			background-color: #F2F7FF;
			padding: 22rpx;
			border-radius: 6rpx;

			.like-users {
				position: relative;

				&.has-border {
					padding-bottom: 16rpx;
					border-bottom: 1rpx solid rgba(51, 153, 255, 0.3);
				}

				.lick-icon {
					position: absolute;
					top: 4rpx;
					left: 4rpx;

					width: 34rpx;
					height: 30rpx;
				}

				.like-users-name {
					text-indent: 2em;
					font-weight: 600;
					color: #414C6C;
					line-height: 20px;
					font-size: 26rpx;
				}
			}

			.leave-msg {
				padding-top: 4rpx;

				.leave-msg-item {
					margin-top: 12rpx;

					.leave-msg-user {
						font-weight: 600;
						color: #414C6C;
						line-height: 40rpx;
						font-size: 26rpx;
					}

					.leave-msg-text1 {
						color: #666;
						line-height: 36rpx;
						font-size: 26rpx;
						margin: 0 6rpx;
					}

					.leave-msg-text2 {
						color: #666;
						line-height: 36rpx;
						font-size: 26rpx;
						margin-left: 6rpx;
					}
				}

				.extend-all-comment {
					text-align: center;
					margin-top: 16rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					padding-top: 16rpx;
					;
					line-height: 36rpx;
				}
			}
		}
	}
</style>
